/* 
1 当前页面用到的数据有三个来源 
  1 redux中的 当前城市
  2 接口中的 热门城市
  3 接口中的 所有城市 
2 在组件挂载完毕的时候 打印 cityName= undefined
  原因：
  1 当前城市 在 App 里面 异步请求来拿 
  2 页面的组件渲染完毕了  百度的当前城市信息 才回来了 
3 如何才可以在三个数据都回来了 再做数据合并！！
  1 确保页面 componentDidMount 可以拿到 当前城市信息就可以了
  2 希望 当前城市 回来了之后 才 渲染 整个项目 的页面 
4 如何设计总的数据
  1 得要构造 约定好的数据结构
  2 把排好序的大的数组（allCitys）  经过处理 将它合并到 最后的数组（finalArr）
 

 */
import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import axios from "../../utils/request";
import { connect } from "react-redux";
import IndexCss from "./index.module.scss";
// 引入 可视区域渲染组件
import { List } from 'react-virtualized';

import { changeCurrentCityByName } from "../../store/actionCreator";




class index extends Component {


  state = {
    cityList: [],
    // 字母列表
    letterList: [],
    // 字母激活的索引
    selectIndex: 0
  }

  async componentDidMount() {


    // 字母列表
    let letterList = ["#", "热"];

    const arr = await Promise.all([this.getHots(), this.getAllCitys()]);
    // 当前城市
    const cityName = this.props.cityName;
    // 热门城市
    let hots = arr[0].data.body;
    // 所有城市
    let allCitys = arr[1].data.body
    // console.log(cityName);
    // console.log(hots.data.body);
    // console.log(allCitys);

    let finalArr = [
      { "当前地址": [cityName] },
      { "热门城市": hots.map(v => v.label) },
      // {"A":"安庆"}
    ];

    // 要对 所用城市数组 排序 ABCD 
    // const newArr=["d",'c','r','t'];
    // newArr.sort();
    // console.log(newArr);

    // 对对象数组排序 => 根据 对象中的某个属性来排序 
    // "C" "D"  a = { short:"a"}  b = { short:"w"}
    allCitys.sort((a, b) => a.short < b.short ? -1 : 1);

    //  1 对 allCitys 大的数组 进行循环
    allCitys.forEach(v => {
      // v = {label: "安庆", value: "AREA|b4e8be1a-2de2-e039", pinyin: "anqing", short: "aq"}
      // 2 判断一下 v short属性的 首字母 是否存在于 finalArr数组中
      // 获取首字母 
      const firstLetter = v.short[0].toUpperCase();
      // 如何判断一个对象的属性是否存在 hasOwnProperty
      const index = finalArr.findIndex(vv => {
        // vv =  { "当前地址": [cityName] },
        return vv.hasOwnProperty(firstLetter)
      });

      // 对index做出判断  
      if (index === -1) {
        // 当前的 firstLetter(A,B,C) 属性不存在与 finalArr 数组当中
        finalArr.push({
          // firstLetter:[v.label],
          // 动态属性
          [firstLetter]: [v.label]
        })

        letterList.push(firstLetter);
      } else {
        // 已经存在了
        // finalArr[index] = {"B":["北海"]}
        // let obj=finalArr[index];
        //  obj[firstLetter] =  obj.b   = obj.c 
        // obj[firstLetter]
        finalArr[index][firstLetter].push(v.label);
      }

    })

    this.setState({ cityList: finalArr, letterList });

  }

  // 获取热门城市
  getHots = () => {
    return axios.get("http://157.122.54.189:9060/area/hot")
  }

  // 获取所有城市
  getAllCitys = () => {
    return axios.get("http://157.122.54.189:9060/area/city?level=1")
  }

  // 城市名称的点击事件
  handleCityClick(cityName) {
    // 后台只有热门城市的数据 其他城市没有数据
    // 课下在编写代码的时候 只点击 热门城市 
    // console.log(cityName);
    this.props.chanegCurrentCity(cityName);
    // 返回上一页
    this.props.history.go("-1");
  }

  // 每一个城市选项的渲染函数
  rowRenderer = ({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
  }) => {

    // { "热门城市": [ "北京", "广州", "上海", "深圳" ] },
    const obj = this.state.cityList[index];
    const propsName = Object.keys(obj)[0];

    return (
      <div key={key} style={style}>
        {/* {this.state.cityList[index]} */}
        <div className={IndexCss.city_title}>{propsName}</div>
        <div className={IndexCss.city_arr}>
          {
            obj[propsName].map((v, i) =>
              <div
                onClick={() => this.handleCityClick(v)}
                className={IndexCss.city_name} key={i} >{v}</div>
            )
          }
        </div>
      </div>
    );
  }
  rowHeight = ({ index }) => {
    // index 等于 cityList中的索引
    // 获取 对象中的数组的长度
    const obj = this.state.cityList[index];
    const propsName = Object.keys(obj)[0];
    const length = obj[propsName].length;
    return (length + 1) * 40;
  }

  // 列表滚动事件
  onRowsRendered = ({ startIndex }) => {
    this.setState({ selectIndex: startIndex });
  }

  handleLetterClick(index) {
    this.setState({ selectIndex: index });
  }

  render() {

    // 返回上一页
    // this.props.history.go(-1);

    return (
      <div>
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => this.props.history.go(-1)}
        >城市选择</NavBar>
        {/* 内容 开始 */}
        <div className={IndexCss.city_view}>
          {/*  城市内容 开始 */}
          <div className={IndexCss.city_list}>
            <List
              width={window.screen.width}
              height={window.screen.height - 45}
              rowCount={this.state.cityList.length}
              rowHeight={this.rowHeight}
              rowRenderer={this.rowRenderer}
              onRowsRendered={this.onRowsRendered}
              scrollToIndex={this.state.selectIndex}
              scrollToAlignment="start"
            />
          </div>
          {/*  城市内容 结束 */}
          {/* 字母列表 开始 */}
          <div className={IndexCss.letter_list}>
            {this.state.letterList.map((v, i) =>
              <div
                onClick={() => this.handleLetterClick(i)}
                className={
                  [
                    IndexCss.letter_item,
                    this.state.selectIndex === i ? IndexCss.active : ''
                  ].join('  ')
                } key={v} >{v}</div>)}
          </div>
          {/* 字母列表 结束 */}
        </div>
        {/* 内容 结束 */}
      </div>
    );
  }
}

// const mapStateToProps = (state) => ({

// })

const mapStateToProps = (state) => {
  return {
    cityName: state.mapReducer.city.name
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    chanegCurrentCity(cityName) {
      dispatch(changeCurrentCityByName({ cityName }))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(index);